<template>
    <div class="plugins-page">
        <el-table :data="tableData" header-row-class-name='table-header-class' style="height:calc(100% - 16px);"
            v-loading="tbleLoading">
            <el-table-column prop="tagName" :label="$t('message.table.plugins')">
                <template #default="scope">
                    <div class="scope-item">
                        <svg class="type-icons" aria-hidden="true" v-for="(item, index) in scope.row.iconList"
                            :key="index">
                            <use v-bind:xlink:href="item"></use>
                        </svg>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" :label="$t('message.table.name')"></el-table-column>
            <el-table-column prop="createBy" :label="$t('message.table.created')">
                <template #default="scope">
                    <div class="scope-item">
                        <svg class="icons" aria-hidden="true" v-if="!!scope.row.created">
                            <use xlink:href="#keowledge-xuanzhong"></use>
                        </svg>
                        <div v-else class="no-active"></div>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="createBy" :label="$t('message.table.priview')">
                <template #default="scope">
                    <div class="scope-item">
                        <svg class="icons" aria-hidden="true" v-if="!!scope.row.view">
                            <use xlink:href="#keowledge-xuanzhong"></use>
                        </svg>
                        <div v-else class="no-active"></div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="createBy" :label="$t('message.table.edit')">
                <template #default="scope">
                    <div class="scope-item">
                        <svg class="icons" aria-hidden="true" v-if="!!scope.row.edit">
                            <use xlink:href="#keowledge-xuanzhong"></use>
                        </svg>
                        <div v-else class="no-active"></div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="createBy" :label="$t('message.table.coord')">
                <template #default="scope">
                    <div class="scope-item">
                        <svg class="icons" aria-hidden="true" v-if="!!scope.row.coord">
                            <use xlink:href="#keowledge-xuanzhong"></use>
                        </svg>
                        <div v-else class="no-active"></div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="createBy" :label="$t('message.table.search')">
                <template #default="scope">
                    <div class="scope-item">
                        <svg class="icons" aria-hidden="true" v-if="!!scope.row.search">
                            <use xlink:href="#keowledge-xuanzhong"></use>
                        </svg>
                        <div v-else class="no-active"></div>
                    </div>
                </template>
            </el-table-column>
            <template #empty>
                <jvs-empty></jvs-empty>
            </template>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    toRefs,
    watch,
    onMounted,
    getCurrentInstance
} from 'vue'

import { useRouter } from "vue-router"
import { useHookI18n } from '@/hooks/i18n'
const { locale, $t } = useHookI18n()
const router = useRouter();

const emit = defineEmits([""])
const tableData = [
    {
        name: $t('message.beCurrent.txt'),
        isPlugin: true,
        created: true,
        view: true,
        edit: true,
        coord: true,
        search: true,
        iconList: ['#keowledge-a-zu3554']
    },
    {
        name: $t('message.beCurrent.table'),
        isPlugin: true,
        created: true,
        view: true,
        edit: true,
        coord: true,
        search: true,
        iconList: ['#keowledge-a-zu3555']
    }, {
        name: $t('message.beCurrent.map'),
        isPlugin: true,
        created: true,
        view: true,
        edit: true,
        coord: true,
        search: true,
        iconList: ['#keowledge-naotu']
    }, {
        name: $t('message.beCurrent.process'),
        isPlugin: true,
        created: true,
        view: true,
        edit: true,
        coord: true,
        search: true,
        iconList: ['#keowledge-liucheng']
    }, {
        name: $t('message.beCurrent.office'),
        isPlugin: false,
        created: true,
        view: true,
        edit: true,
        coord: true,
        search: true,
        iconList: ['#keowledge-office']
    },
    {
        name: $t('message.beCurrent.markdown'),
        isPlugin: false,
        created: true,
        view: true,
        edit: true,
        search: true,
        iconList: ['#keowledge-MAK']
    },
    {
        name: $t('message.beCurrent.xmind'),
        isPlugin: false,
        created: true,
        view: true,
        edit: true,
        search: true,
        iconList: ['#keowledge-xmind']
    },
    {
        name: $t('message.beCurrent.pdf'),
        isPlugin: true,
        view: true,
        edit: true,
        search: true,
        iconList: ['#keowledge-a-zu3557']
    }, {
        name: $t('message.beCurrent.epub'),
        isPlugin: false,
        view: true,
        search: true,
        iconList: ['#keowledge-dianzishu']
    }, {
        name: $t('message.beCurrent.zip'),
        isPlugin: true,
        view: true,
        iconList: ['#keowledge-yasuo']
    }, {
        name: $t('message.beCurrent.mp3'),
        isPlugin: true,
        view: true,
        iconList: ['#keowledge-MP3']
    },
    {
        name: $t('message.beCurrent.video'),
        isPlugin: true,
        view: true,
        iconList: ['#keowledge-shipin']
    },
    {
        name: $t('message.beCurrent.image'),
        view: true,
        isPlugin: true,
        iconList: ['#keowledge-tupian']
    }, {
        name: $t('message.beCurrent.gif'),
        isPlugin: true,
        view: true,
        iconList: ['#keowledge-GIF']
    },
]
</script>
<style lang="scss" scoped>
.plugins-page {
    padding: 8px 24px;
    height: 100%;
    box-sizing: border-box;

    ::v-deep(.table-header-class) {
        color: #363B4c;
        @include SourceHanSansCN-Bold;
        font-size: 12px;
        background: #F5F6F7;

        th {
            background: #F5F6F7;
        }
    }

    .scope-item {
        display: flex;
        align-items: center;
        height: 70px;

        .type-icons {
            width: 40px;
            height: 40px;
        }

        .icons {
            width: 26px;
            height: 26px;
        }

        .no-active {
            height: 3px;
            width: 24px;
            background-color: rgba(141, 147, 159, 1);
        }
    }

}
</style>